/* 全局布局样式 */
.app-container {
  min-height: 100vh;
  background-color: var(--bg-color);
  
  .main-content {
    @include responsive('padding', 20);
    @include responsive('margin-top', 60);
  }
}

/* 常用布局类 */
.flex {
  display: flex;
  
  &-center {
    justify-content: center;
    align-items: center;
  }
  
  &-between {
    justify-content: space-between;
    align-items: center;
  }
  
  &-column {
    flex-direction: column;
  }
}

/* 布局间距 */
.spacing {
  &-sm { @include responsive('margin-bottom', 10); }
  &-md { @include responsive('margin-bottom', 20); }
  &-lg { @include responsive('margin-bottom', 30); }
} 